<template>
  <p class="mt-5 p-4">
    当前时间：<span class="text-primary-500">{{ nowLabel }}</span
    >, 当前时间戳：<span class="text-primary-500">{{ nowTimestampLabel }}</span>
    <button class="btn btn-sm ml-3" @click="getNow()">
      <ArrowPathIcon class="w-3 h-3" />
    </button>
  </p>

  <div class="mt-3 p-4">
    <label class="text-md mr-8 text-gray-500 dark:text-gray-400">时间戳:</label>
    <div class="relative z-0 inline-block">
      <input
        type="number"
        class="block py-2.5 pl-5 min-w-56 w-1/4 text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        placeholder=" "
        v-model="nowTimestamp"
        @input="convertTimestamp"
      />
      <label
        for="floating_standard"
        class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
        >时间戳</label
      >
    </div>
    <ArrowRightIcon class="inline-block h-5 w-5 m-5" />
    <input
      type="text"
      class="py-2.5 pl-5 min-w-56 text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
      disabled
      placeholder="YYYY-MM-DD HH:mm:ss"
      v-model="now"
    />
  </div>

  <div class="p-4">
    <label class="text-md mr-8 text-gray-500 dark:text-gray-400">日 期:</label>
    <div class="relative z-0 inline-block">
      <input
        type="text"
        class="block py-2.5 pl-5 min-w-56 w-1/4 text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        placeholder=" "
        v-model="now2"
        @input="convertTime"
      />
      <label
        for="floating_standard"
        class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
        >YYYY-MM-DD HH:mm:ss</label
      >
    </div>
    <ArrowRightIcon class="inline-block h-5 w-5 m-5" />
    <input
      type="text"
      class="py-2.5 pl-5 min-w-56 text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
      disabled
      placeholder="时间戳"
      v-model="timestamp"
    />
  </div>
</template>

<script setup lang="ts">
// http://momentjs.cn/
// 默认显示时间戳

import { ref } from "vue";
import { ArrowRightIcon, ArrowPathIcon } from "@heroicons/vue/24/outline";
import monent from "moment";
const timeFormat = "YYYY-MM-DD HH:mm:ss";
const nowLabel = ref("");
const nowTimestampLabel = ref(0);
nowLabel.value = monent().format(timeFormat);
nowTimestampLabel.value = monent().valueOf();
// 组件挂载后每秒刷新时间
// onMounted(() => {
//   setInterval(() => {
//     nowLabel.value = monent().format(timeFormat);
//     nowTimestampLabel.value = monent().valueOf();
//   }, 1000);
// });

function getNow() {
  nowLabel.value = monent().format(timeFormat);
  nowTimestampLabel.value = monent().valueOf();
}

// ------------ 时间戳转换为日期
const nowTimestamp = ref();
const now = ref("");

const convertTimestamp = () => {
  let t = nowTimestamp.value;
  // 自动补全13位时间戳
  if (t < 1000000000000 && t >= 100000000000) {
    t = t * 10;
  } else if (t < 100000000000 && t >= 10000000000) {
    t = t * 100;
  } else if (t < 10000000000 && t >= 1000000000) {
    t = t * 1000;
  }
  now.value = monent(t).format(timeFormat);
};

// ------------ 日期转换为时间戳
const timestamp = ref();
const now2 = ref("");
const convertTime = () => {
  timestamp.value = monent(now2.value).valueOf();
};
</script>

<style lang="scss" scoped></style>
